<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>单表查询</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">  
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
	<link href="css/main.css" rel="stylesheet" type="text/css" />
	<link href="js/plugins/dateTimePicker/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery.min.js"></script> 
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<!-- 新增js  -->
	<script src="Highcharts/js/highcharts.js"></script>
	<script src="Highcharts/js/highcharts-3d.js"></script>
	<script src="Highcharts/js/modules/exporting.js"></script>	
	<script type="text/javascript" src="js/plugins/dateTimePicker/jquery.datetimepicker.js"></script>	
	<script type="text/javascript" src="js/tools.js"></script>
  </head>
  <body style="overflow: hidden;">
	<!-- Right side -->
	<div id="fcontent">
	    <div class="clear" style="margin-top:10px; "></div>
	    <!-- Main content wrapper -->
	    <div class="wrapper" >
	    
	        <ul class="tabs" >
                <li><a href="#tab1" onclick="chartSearch('1');" style="border-left: 1px solid #cdcdcd;border-top:1px solid #cdcdcd; ">延时分布</a></li>
                <li><a href="#tab2" onclick="chartSearch('2');" style="border-top:1px solid #cdcdcd; ">延时统计</a></li>
                <li><a href="#tab3" onclick="chartSearch('3');" style="border-top:1px solid #cdcdcd; ">延时占比</a></li>
            </ul>
	        <div class="tab_container" >
                <div id="tab1" class="tab_content">显示某一段时间内设备的延时情况</div>
                <div id="tab2" class="tab_content">网络延迟的分布图</div>
                <div id="tab3" class="tab_content">网络延迟统计图</div>
            </div>	
        <div class="widget" style="margin-top: 0px;">
        	<form id="searchForm">
            <table cellpadding="0" cellspacing="0" width="100%" class="sTable">
                <tbody>
                	<tr>
                	    <td>地区</td>
                        <td>
                        	 <select name="" style="width:90%;height:30px;" ><option></option><option>地区1</option><option>地区2</option></select>
                        </td>
                	    <td>区县</td>
                        <td>
                        	 <select name="" style="width:90%;height:30px;" ><option></option><option>县区1</option><option>县区2</option></select>
                        </td>                        
                	    <td>台区</td>
                        <td>
                        	 <select name="" style="width:90%;height:30px;" ><option></option></select>
                        </td>                        
                        <td>终端地址</td>
                        <td><input type="text" value="" name="TERMINAL_ADDRESS" style="width:90%;height:30px;" /></td> 
                        <td rowspan="2" style="width:10%;vertical-align: top;">
                 		<a href="javascript:chartSearch('');" title="" class="button basic" style="margin: 5px;"><img src="images/icons/dark/magnify.png" alt="" class="icon" /><span style="font-size:12px;">查询</span></a>
                        </td>                       
                	</tr>
                    <tr>
                        <td>起始日期</td>
                        <td><input id="BEGINDATE" name="BEGINDATE" type="text" style="width:90%;height:30px;" /> 
                        </td>
                        <td>截止日期</td>
                        <td><input id="ENDDATE" name="ENDDATE" type="text" style="width:90%;height:30px;" /> 
                        </td>
                        <td>延时大于</td>
                        <td><input type="text" value="" name="" style="width:90%;height:30px;" /></td> 
                         <td>延时小于</td>
                        <td><input type="text" value="" name="s" style="width:90%;height:30px;" /></td> 

                    </tr>
                    <!--  
                    <tr>
                        <td>通道类型</td>
                        <td><input type="text" value="" name="RMT_CH_TYPE" style="width:90%;height:30px;" /></td>
                        <td>终端类型</td>
                        <td><input type="text" value="" name="TERMINAL_TYPE" style="width:90%;height:30px;" /></td>
                        <td>地区类型</td>
                        <td><input type="text" value="" name="ZONE" style="width:90%;height:30px;" /></td>
                    </tr>
                    -->
                    
                </tbody>
            </table>
            </form>
        </div>  	    
	        <!-- Lines chart -->
	        <!--  
	        <div class="clear" style="margin-top:10px; "></div>
        	<ul class="tabs" >
                <li><a href="#tab1" onclick="chartSearch('1');" style="border-left: 1px solid #cdcdcd;border-top:1px solid #cdcdcd; ">延时概况</a></li>
                <li><a href="#tab2" onclick="chartSearch('2');" style="border-top:1px solid #cdcdcd; ">延时分布</a></li>
                <li><a href="#tab3" onclick="chartSearch('3');" style="border-top:1px solid #cdcdcd; ">延时统计</a></li>
            </ul>
	        <div class="tab_container" >
                <div id="tab1" class="tab_content">显示某一段时间内设备的延时情况</div>
                <div id="tab2" class="tab_content">网络延迟的分布图</div>
                <div id="tab3" class="tab_content">网络延迟统计图</div>
            </div>	
            -->
	        <div class="widget chartWrapper" style="margin-top:0px; ">
	            <div class="title"><img src="images/icons/color/chart.png" alt="" class="titleIcon" /><h6>数据图</h6></div>
	            <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
	        </div>
	        	        <!-- Note -->
<!-- 	        <div id="dev" class="nNote nInformation hideit"> -->
<!-- 	            <p><strong>当前无设备信息。</strong></p> -->
<!-- 	        </div> -->
	  
	            <div class="clear"></div>
	            <input id="chartType" value="1" type="hidden" />
	     </div>
	</div>
	<script type="text/javascript">
	//页面初始化 tab页
	$(document).ready(function(){
		$("div[class^='widget']").contentTabs();
  		$(this).find(".tab_content").hide(); //Hide all content
		$(this).find("ul.tabs li:first").addClass("activeTab").show(); //Activate first tab
		$(this).find(".tab_content:first").show(); //Show first tab contents
	});
		
	//时间控件
	$('#BEGINDATE').datetimepicker({
	    lang:'ch',
	    timepicker:false,
	     format:'Y-m-d',
	    formatDate:'Y-m-d'
	});
	$('#ENDDATE').datetimepicker({
	    lang:'ch',
	    timepicker:false,
	     format:'Y-m-d',
	    formatDate:'Y-m-d'
	});
	
	function chartSearch (chartType) {
		if(chartType==''){
			chartType = $("#chartType").val();
		}else{
			$("#chartType").val(chartType);
		}
		var begindate = $("#BEGINDATE").val();	
		var enddate = $("#ENDDATE").val();
		if(begindate ==''){
			alert('请选择起始日期！');
			return;
		}
		var param = $("#searchForm").serializeObject(); 
		if(chartType ==1){
			$.ajax({
					url: 'dataShow/queryAddrDateCharts?ajaxFlag=1',
					type: 'POST',
					data: {formObj:encodeURI(JSON.stringify(param))},
					dataType: 'text',
					success: function (datas) {
							var rsdata = JSON.parse(datas);
							$('#container').highcharts({
							credits:{
                        		enabled:false
		                    },
		                    exporting:{
			                    enabled:false
			                },
					        title: {
					            text: '阶段误差统计图',
					            x: -20 //center
					        },
					        
					        subtitle: {
					            text: $("#BEGINDATE").val()+'至'+$("#ENDDATE").val(),
					            x: -20
					        },
					        
					        xAxis: {
					            categories: eval(rsdata.categories)
					        },
					        yAxis: {
					            title: {
					                text: '延迟（单位秒）'
					            },
					            plotLines: [{
					                value: 0,
					                width: 1,
					                color: '#808080'
					            }]
					        },
					        tooltip: {
					            valueSuffix: 's'
					        },
					        legend: {
					            layout: 'vertical',
					            align: 'right',
					            verticalAlign: 'middle',
					            borderWidth: 0
					        },
					        series: eval(rsdata.series)
					    }); 
					    //图表下部设备说明
					    /*
					    var devArr = eval(rsdata.device);
					    if(devArr.length>0){
					    	var devhtml = '<p>'+rsdata.statistics+'</p>';
						    for(var i=0;i<devArr.length;i++){
						    	devhtml += '<p><strong>'+devArr[i].TERMINAL_ADDRESS+':</strong>'+devArr[i].DEVICEDESC+'</p>'
						    }
						    $("#tab1").html(devhtml);
					    }
					    */
					    //重置父页面iframe高度，防止出现滚动条
						resetPheight();
					}
			});
		}
		/**************************************/
		if(chartType ==2){
			$.ajax({
					url: 'dataShow/queryDelaySecDeviceNumCharts?ajaxFlag=1',
					type: 'POST',
					data: {formObj:encodeURI(JSON.stringify(param))},
					dataType: 'text',
					success: function (datas) {	
						var rsdata = JSON.parse(datas);	
					    $('#container').highcharts({
						    	credits:{
	                        		enabled:false
			                    },
			                    exporting:{
				                    enabled:false
				                },
						        chart: {
						            type: 'column',
						            margin: [ 50, 50, 100, 80]
						        },
						        title: {
						            text: '网络延时分布图'
						        },
						        xAxis: {
						            categories:eval(rsdata.categories),
						            labels: {
						                rotation: -45,
						                align: 'right',
						                style: {
						                    fontSize: '13px',
						                    fontFamily: 'Verdana, sans-serif'
						                }
						            }
						        },
						        yAxis: {
						            min: 0,
						            title: {
						                text: ''
						            }
						        },
						        legend: {
						            enabled: false
						        },
						        tooltip: {
						            pointFormat: '设备数：<b>{point.y:.1f} </b>',
						        },
						        series: [{
						            name: 'Population',
						            data: eval(rsdata.series),
						            dataLabels: {
						                enabled: true,
						                rotation: -90,
						                color: '#FFFFFF',
						                align: 'right',
						                x: 4,
						                y: 10,
						                style: {
						                    fontSize: '13px',
						                    fontFamily: 'Verdana, sans-serif',
						                    textShadow: '0 0 3px black'
						                }
						            }
						        }]
						    });
						//重置父页面iframe高度，防止出现滚动条
					    resetPheight();
					    
					}
					
			});		
		}
		/*********************************/
		if(chartType ==3) {
			$.ajax({
			url: 'dataShow/queryDelaySecDeviceNumPercentCharts?ajaxFlag=1',
			type: 'POST',
			data: {formObj:encodeURI(JSON.stringify(param))},
			dataType: 'text',
			success: function (datas) {	
				var rsdata = JSON.parse(datas);
			    $('#container').highcharts({
	    			credits:{
                    	enabled:false
                    },
                    exporting:{
	                    enabled:false
	                },
			        chart: {
			            type: 'pie',
			            options3d: {
			                enabled: true,
			                alpha: 45,
			                beta: 0
			            }
			        },
			        title: {
			            text: '网络延时统计图'
			        },
			        tooltip: {
			            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
			        },
			        plotOptions: {
			            pie: {
			                allowPointSelect: true,
			                cursor: 'pointer',
			                depth: 35,
			                dataLabels: {
			                    enabled: true,
			                    format: '{point.name}s'
			                }
			            }
			        },
			        series: [{
			            type: 'pie',
			            name: '占比',
			            data: eval(rsdata.series)
			        }]
			    });
			    //重置父页面iframe高度，防止出现滚动条
				resetPheight();
			 }
			}); 
		}			

	}
	
	//重置父页面div高度
	function resetPheight(){
		$(window.parent.document).find("#frameShow").height($("#fcontent").height()+20);
	    $(window.parent.document).find("#rightSide").height($("#fcontent").height()+80);
	    $(window.parent.document).find("#leftSide").height($("#fcontent").height()+20);
	}
	
	</script>
  </body>
</html>
